<!--
 * @Description: 商品详情页面组件
 * @Author: hai-27
 * @Date: 2020-02-16 20:20:26
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-07 21:59:26
 -->
<template>
	<div id="details">
		<!-- 头部 -->
		<div class="page-header">
			<div class="title">
				<p>{{ productDetails.name }}</p>
				<div class="list">
					<ul>
						<li>
							<router-link to>概述</router-link>
						</li>
						<li>
							<router-link to>参数</router-link>
						</li>
						<li>
							<router-link to>用户评价</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 头部END -->
		
		<!-- 主要内容 -->
		<div class="main">
			<!-- 左侧商品轮播图 -->
			<div class="block">
				<el-carousel height="560px" v-if="productPicture.length>1">
					<el-carousel-item v-for="item in productPicture" :key="item">
						<img style="height:560px;" :src="item"/>
					</el-carousel-item>
				</el-carousel>
				<div v-if="productPicture.length==1">
					<img
						style="height:560px;"
						:src="productPicture[0].image"
						:alt="productPicture[0].intro"
					/>
				</div>
			</div>
			<!-- 左侧商品轮播图END -->
			
			<!-- 右侧内容区 -->
			<div class="content">
				<h1 class="name">{{ productDetails.name }}</h1>
				<p class="intro">{{ productDetails.intro }}</p>
				<p class="store">小米自营</p>
				<div class="price">
					<span>{{ productDetails.price }}元</span>
					<span
						v-show="productDetails.productPrice != productDetails.price"
						class="del"
					>{{ productDetails.productPrice }}元</span>
				</div>
				<span v-if="productDetails.stock!==0">数量：</span>
				<el-input-number
					size="small"
					v-model="number"
					:min="1"
					:max="productDetails.stock"
					v-if="productDetails.stock!==0"
				></el-input-number>
				<div class="pro-list">
					<span class="pro-name">{{ productDetails.name }}</span>
					<span class="pro-price">
            <span>{{ productDetails.price }}元</span>
            <span
				v-show="productDetails.productPrice != productDetails.price"
				class="pro-del"
			>{{ productDetails.productPrice }}元</span>
          </span>
					<p class="price-sum">总计 : {{ productDetails.price }}元</p>
				</div>
				<!-- 内容区底部按钮 -->
				<div class="button">
					<el-button class="shop-cart" v-if="productDetails.stock > 0" :disabled="dis"
							   @click="addShoppingCart">加入购物车
					</el-button>
					<el-button class="shop-cart" v-if="productDetails.stock==0" disabled @click="addShoppingCart">
						加入购物车
					</el-button>
					<el-button v-if="collected==false" class="like" @click="addCollect">喜欢</el-button>
					<el-button v-if="collected==true" class="like" @click="removeCollect(productID)">取消收藏
					</el-button>
				</div>
				<!-- 内容区底部按钮END -->
				<div class="pro-policy">
					<ul>
						<li>
							<i class="el-icon-circle-check"></i> 小米自营
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 小米发货
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 7天无理由退货
						</li>
						<li>
							<i class="el-icon-circle-check"></i> 7天价格保护
						</li>
					</ul>
				</div>
			</div>
			<!-- 右侧内容区END -->
		</div>
		<!-- 主要内容END -->
	</div>
</template>
<script>
	import {mapActions} from "vuex";
	
	export default {
		data() {
			return {
				dis: false, // 控制“加入购物车按钮是否可用”
				productID: "", // 商品id
				productDetails: "", // 商品详细信息
				productPicture: "", // 商品图片
				quantity: "",   //数量
				number: 1,
				userCollect: "",  //用户收藏列表
				collected: false,  //该商品该用户是否收藏
				userCart: "",   //用户购物车
				isCart: false,  //该商品该用户是否收藏
				cart: "",
			};
			
		},
		created() {
			this.selectCollect();  //查询用户收藏列表
		},
		// 通过路由获取商品id
		activated() {
			if (this.$route.query.productID != undefined) {
				this.productID = this.$route.query.productID;
			}
		},
		watch: {
			// 监听商品id的变化，请求后端获取商品数据
			productID: function (val) {
				this.getDetails(val);
				this.selectCollect();
			}
		},
		methods: {
			...mapActions(["unshiftShoppingCart", "addShoppingCartNum"]),
			// 获取商品详细信息
			getDetails(val) {
				this.$axios
					.get(`/product/selectById/${val}`, {})
					.then(res => {
						this.productDetails = res.data.data;
						this.productPicture = res.data.data.carouselImage.split(',');
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			
			//用户收藏列表
			selectCollect() {
				this.collected = false;
				let id = this.$store.getters.getUser.id;
				this.$axios
					.get(`/product/collect/selectUserCollect/${id}`, {})
					.then(res => {
						this.userCollect = res.data.data;
						if (this.userCollect.length != 0) {
							this.userCollect.forEach(item => {
								if (this.productID == item.productId) {
									this.collected = true;
								}
							})
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			
			// 加入购物车
			addShoppingCart() {
				// 判断是否登录,没有登录则显示登录组件
				if (!this.$store.getters.getUser) {
					this.$store.dispatch("setShowLogin", true);
					return;
				}
				this.$axios
					.post("/order/cart/add", {
						userId: this.$store.getters.getUser.id,
						productId: this.productID,
						quantity: this.number
					})
					.then(res => {
						if (res.data.code === 0) {
							// 新加入购物车成功
							this.unshiftShoppingCart(res.data.data);
							this.notifySucceed(res.data.msg);
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
				
			},
			
			//添加收藏
			addCollect() {
				// 判断是否登录,没有登录则显示登录组件
				if (!this.$store.getters.getUser) {
					this.$store.dispatch("setShowLogin", true);
					return;
				}
				this.$axios
					.post("/product/collect/add", {
						userId: this.$store.getters.getUser.id,
						productId: this.productID
					})
					.then(res => {
						if (res.data.code === 0) {
							// 添加收藏成功
							this.collected = true;
							this.notifySucceed(res.data.msg);
						} else {
							// 添加收藏失败
							this.notifyError(res.data.msg);
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			//取消收藏
			removeCollect(productId) {
				let id = this.$store.getters.getUser.id;
				this.$axios
					.delete(`/product/collect/removeCollect/${id}/${productId}`, {})
					.then(res => {
						switch (res.data.code) {
							case 0:
								// 删除成功
								this.collected = false;
								// 提示删除成功信息
								this.notifySucceed(res.data.msg);
								break;
							default:
								// 提示删除失败信息
								this.notifyError(res.data.msg);
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
		}
	};
</script>
<style>
	/* 头部CSS */
	#details .page-header {
		height: 64px;
		margin-top: -20px;
		z-index: 4;
		background: #fff;
		border-bottom: 1px solid #e0e0e0;
		-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
		box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07);
	}
	
	#details .page-header .title {
		width: 1225px;
		height: 64px;
		line-height: 64px;
		font-size: 18px;
		font-weight: 400;
		color: #212121;
		margin: 0 auto;
	}
	
	#details .page-header .title p {
		float: left;
	}
	
	#details .page-header .title .list {
		height: 64px;
		float: right;
	}
	
	#details .page-header .title .list li {
		float: left;
		margin-left: 20px;
	}
	
	#details .page-header .title .list li a {
		font-size: 14px;
		color: #616161;
	}
	
	#details .page-header .title .list li a:hover {
		font-size: 14px;
		color: #ff6700;
	}
	
	/* 头部CSS END */
	
	/* 主要内容CSS */
	#details .main {
		width: 1225px;
		height: 560px;
		padding-top: 30px;
		margin: 0 auto;
	}
	
	#details .main .block {
		float: left;
		width: 560px;
		height: 560px;
	}
	
	#details .el-carousel .el-carousel__indicator .el-carousel__button {
		background-color: rgba(163, 163, 163, 0.8);
	}
	
	#details .main .content {
		float: left;
		margin-left: 25px;
		width: 640px;
	}
	
	#details .main .content .name {
		height: 30px;
		line-height: 30px;
		font-size: 24px;
		font-weight: normal;
		color: #212121;
	}
	
	#details .main .content .intro {
		color: #b0b0b0;
		padding-top: 10px;
	}
	
	#details .main .content .store {
		color: #ff6700;
		padding-top: 10px;
	}
	
	#details .main .content .price {
		display: block;
		font-size: 18px;
		color: #ff6700;
		border-bottom: 1px solid #e0e0e0;
		padding: 25px 0 25px;
	}
	
	#details .main .content .price .del {
		font-size: 14px;
		margin-left: 10px;
		color: #b0b0b0;
		text-decoration: line-through;
	}
	
	#details .main .content .pro-list {
		background: #f9f9fa;
		padding: 30px 60px;
		margin: 50px 0 50px;
	}
	
	#details .main .content .pro-list span {
		line-height: 30px;
		color: #616161;
	}
	
	#details .main .content .pro-list .pro-price {
		float: right;
	}
	
	#details .main .content .pro-list .pro-price .pro-del {
		margin-left: 10px;
		text-decoration: line-through;
	}
	
	#details .main .content .pro-list .price-sum {
		color: #ff6700;
		font-size: 24px;
		padding-top: 20px;
	}
	
	#details .main .content .button {
		height: 55px;
		margin: 10px 0 20px 0;
	}
	
	#details .main .content .button .el-button {
		float: left;
		height: 55px;
		font-size: 16px;
		color: #fff;
		border: none;
		text-align: center;
	}
	
	#details .main .content .button .shop-cart {
		width: 340px;
		background-color: #ff6700;
	}
	
	#details .main .content .button .shop-cart:hover {
		background-color: #f25807;
	}
	
	#details .main .content .button .like {
		width: 260px;
		margin-left: 40px;
		background-color: #b0b0b0;
	}
	
	#details .main .content .button .like:hover {
		background-color: #757575;
	}
	
	#details .main .content .pro-policy li {
		float: left;
		margin-right: 20px;
		color: #b0b0b0;
	}
	
	/* 主要内容CSS END */
</style>
